<template>
  <view class="root">
    <view class="content">
      <view class="content-inner-wrapper">
        <uni-forms ref="form" :model="form" validateTrigger="blur" label-width="172rpx" err-show-type="toast"
          v-if="['add', 'edit'].includes(actionType)">
          <view class="content-inner-wrapper">
            <uni-forms-item label="房屋类型:" name="fZdgzFwlx" required key="fZdgzFwlx">
              <view class="form-content-item" :class="form.fZdgzFwlx ?  '' : 'input-item'"
                @click="hadleShowPicker('key_houses_type', 'fZdgzFwlx')">
                <uni-easyinput type="text" disabled v-model="form.fZdgzFwlx_text" :inputBorder="false"
                  placeholder="请选择房屋类型" :clearable="true" />
                <u-icon slot="right" name="arrow-right"></u-icon>
              </view>
            </uni-forms-item>
            <uni-forms-item label="设置原因:" name="fZdgzYy" required key="fZdgzYy">
              <view class="form-content-item" :class="form.fZdgzYy ?  '' : 'input-item'">
                <u--textarea v-model="form.fZdgzYy" placeholder="请填写"
                  placeholderStyle="font-weight: 400;font-size: 28rpx;color: #A1A1A1;" count
                  maxlength="50"></u--textarea>
              </view>
            </uni-forms-item>
          </view>
        </uni-forms>
        <!--是重点房屋-->
        <view class="view" v-if="routerParams.fIszdgz == 1 && ['view'].includes(actionType)">
          <view class="view-item">
            <view class="label-l">房屋类型:</view>
            <view class="value-l">{{routerParams.fZdgzFwlxName}}</view>
          </view>
          <view class="view-item">
            <view class="label-l">设置时间:</view>
            <view class="value-l">
              {{routerParams.fZdgzSj ?  moment(routerParams.fZdgzSj).format("YYYY/MM/DD HH:mm:ss") : ''}}
            </view>
          </view>
          <view class="view-item">
            <view class="label-l">设置人员:</view>
            <view class="value-l">{{`${routerParams.seupPersonnel}(${routerParams.seupPersonnelType})`}}</view>
          </view>
          <view class="view-item">
            <view class="label-l">设置原因:</view>
            <view class="value-l">{{routerParams.fZdgzYy}}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="button-wrapper">
      <template v-if="['view'].includes(actionType)">
        <view class="modify btn-item" @click="handleModify">
          <image class="icon-s" :src="baseImgUrl + 'modify-important.png'"></image>编辑
        </view>
        <view class="relieve btn-item" @click="handleRelieve" :data-params="routerParams"
          data-url="/actual_real_estate/key_house_cancel">
          <image class="icon-s" :src="baseImgUrl + 'relieve.png'"></image>
          解除
        </view>
      </template>
      <template v-else>
        <view class="cancel btn-item" @click="handleCancel">取消</view>
        <view class="submit btn-item" @click="handleSubmit">保存</view>
      </template>
    </view>

    <u-picker closeOnClickOverlay v-if="pickerShow" :show="pickerShow" :columns="pickerData" keyName="text"
      @confirm="onPickerConfirm" @cancel="pickerShow = false" @close="pickerShow = false"
      :defaultIndex="defaultIndex"></u-picker>
    <yy-watermark></yy-watermark>
  </view>
</template>


<script>
  import {
    upzdszJsonssInfo
  } from '../api/api'
  import {
    postAction
  } from '../utils/request'
  import {
    findCompany,
    infoDetailSave
  } from '@/api/home'
  import moment from '@/utils/moment'
  import pickerMixin from '@/utils/picker-mixin'
  import {
    Toast,
    checkIDCard,
    getHeader,
    getOptionsParams,
    isLoading,
    navBack,
    navigatorTo,
    popup,
    selectNation
  } from '@/utils/util'
  import _ from '@/utils/lodash.js'


  export default {
    mixins: [pickerMixin],
    data() {
      return {
        form: this.initForm(),
        clientId: this.$clientId,
        clientSecret: this.$clientSecret,
        baseImgUrl: this.$baseImgUrl,
        imgPrefix: uni.getStorageSync('imgPrefix'),
        visibleCamera: false,
        rules: {
          fZdgzFwlx: {
            rules: [{
              required: true,
              errorMessage: '请填写房屋类型！',
            }]
          },
          fFwlb: {
            fZdgzYy: [{
              required: true,
              errorMessage: '请填写设置原因！',
            }]
          },
        },
        routerParams: {},
        actionType: 'view',
      }
    },
    // 定义 actionType 'add' 'modify'  
    // 其他参数放在 params 里面
    onLoad(options) {
      let routerParams = getOptionsParams(options)
      this.routerParams = routerParams
      // 判断是新增还是查看还是编辑
      // 查看
      if (this.routerParams.fIszdgz == 1) {
        this.actionType = 'view'
        this.form = _.pick(this.routerParams, Object.keys(this.initForm()))
      } else {
        // 非重点房屋
        this.actionType = 'add'
        this.form = this.initForm()
      }
    },
    onShow() {

    },
    onReady() {},
    methods: {
      moment,
      initForm() {
        return {
          fZdgzYy: '',
          fZdgzFwlx: ''
        }
      },
      handleRelieve(e) {
        navigatorTo(e)
      },
      handleModify() {
        this.actionType = 'edit'
        this.$set(this.form, 'fZdgzFwlx_text', this.routerParams.fZdgzFwlxName)
        this.$set(this.form, 'fZdgzFwlx', this.routerParams.fZdgzFwlx)
      },
      handleCancel() {
        this.actionType = 'view'
      },
      handleSubmit() {
        let params = {
          fIszdgz: '1',
          ...this.form,
          fHouseid: this.routerParams.fHouseid
        }
        upzdszJsonssInfo(params)
          .then((res) => {
            Toast('设置成功！')
            setTimeout(() => {
              navBack()
            }, 50)
          })
      }
    }
  }
</script>

<style>
  page {
    background: #F9F9F9;
    box-sizing: border-box;
  }
</style>

<style lang="scss" scoped>
  @import "../styles/uni-form-label-top.scss";

  .root {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;


    .content {

      flex: 1;
      padding: 19rpx;

      .content-inner-wrapper {
        background: #fff;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        height: 100%;

        .view {
          padding: 35rpx;

          .view-item {
            margin-bottom: 26rpx;
            display: flex;

            .label-l {
              font-weight: 500;
              font-size: 28rpx;
              color: #AAAAAA;
              width: 128rpx;
              // margin-bottom: 22rpx;
            }

            .value-l {
              font-weight: bold;
              font-size: 30rpx;
              color: #333333;
            }
          }
        }
      }

    }

    .button-wrapper {

      .relieve {
        background: #FFDEDE !important;
        color: #FF6D6D;
      }

      .modify {
        background: #EDF7FF !important;
        color: #2488F5;
      }

      .icon-s {
        width: 30rpx;
        height: 30rpx;
        margin-right: 8rpx;
      }
    }
  }
</style>